<template>
	<el-row>
			<el-col :span="24"><div class="grid-content ep-bg-purple-dark" /></el-col>
		</el-row>

		<el-row>
			<el-col :span="12"><div class="grid-content ep-bg-purple" /></el-col>
			<el-col :span="12"><div class="grid-content ep-bg-purple-light" /></el-col>
		</el-row>

		<el-row :gutter="20">
			<el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
			<el-col :span="8"><div class="grid-content ep-bg-purple-light" /></el-col>
			<el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
		</el-row>

		<el-row :gutter="20">
			<el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
			<el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
			<el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
			<el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
		</el-row>

		<el-row :gutter="20">
			<el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
			<el-col :span="6" :offset="12"><div class="grid-content ep-bg-purple" /></el-col>
		</el-row>

		<!-- 默认flex布局 -->
		<el-row class="row-bg" justify="space-between">
			<el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
			<el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
			<el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
		</el-row>
</template>
<style scoped>
.el-row {
	margin-bottom: 20px;
}
.el-row:last-child {
	margin-bottom: 0;
}
.el-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}
.ep-bg-purple-dark {
	background-color: pink;
}
.ep-bg-purple {
	background-color: purple;
}
.ep-bg-purple-light {
	background-color: skyblue;
}
</style>